<template>
  <div class="alarm_msg_container">
    <div id="alarm_msg_echarts"></div>
  </div>
</template>

<script lang="ts">

import * as echarts from "echarts";
import { getByKeyApi } from "@/api/largeScreen";
export default {
  name: "alarmMsgEcharts",
  data () {
    return {
      list: [],
      scrollTop: 0,
      visible: false,
    }
  },
  mounted() {
    this.initData()
  },
  methods: {
    initData() {
      getByKeyApi("memberOverview").then((res) => {
        this.list = res.data?.map(v => {
          return {
            name: v.configName,
            value: v.configValue
          }
        });
        // 切换页面回来之后echarts不渲染的问题(移除_echarts_instance_属性)
        const echartsDOM = document.getElementById("alarm_msg_echarts")
        if (!echartsDOM) return;
        echartsDOM?.removeAttribute('_echarts_instance_')
        const myChart = echarts.init(echartsDOM);
        // 绘制图表
        myChart.setOption({
          // title: '加油统计（本月）',
          tooltip : {
            trigger: 'item'
          },
          // graphic: {
          //   type: 'text',
          //   left: 'center',
          //   top: 'center',
          //   style: {
          //     text: this.list.length,
          //     fill: '#FFFFFF',
          //     fontSize: '30px',
          //   },
          // },
          series: [
            {
              // name: '异常告警数',
              type: 'pie',
              radius: '60%',
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              data: this.list,
              label: {
                formatter: '{b}: {c} \n {d}%',
                // alignTo: 'edge',
                minMargin: 5,
                // edgeDistance: 30,
                lineHeight: 15,
                color: '#fff',
              },
            }
          ]
        });
        // 注册点击事件
        // myChart.on('click', (params) => {
        //   this.visible = true
        // });
      });
    },
  }
};
</script>

<style scoped lang="scss">
.alarm_msg_container {
  width: 100%;
  height: 100%;
  padding: 5px;
  overflow: hidden;
  #alarm_msg_echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
<style lang="scss">
.bigscreen_alarm_dialog {
  .el-dialog__body {
    height: 60vh;
    overflow-y: scroll;
  }
}
</style>
